<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <ul id="citys"></ul>
</body>
<script>
    $.ajax({
        url:'http://localhost:3000'
    }).then(res=>{
        var data = JSON.parse(res);
        console.log(data);
        var provinces = data.locality.provinces[0].province;
        var citys = data.locality.citys[0].city;
        for(var i in provinces){
            $('#citys').append('<li>'+ provinces[i].$.text +'</li>');
            var ul = document.createElement('ul');
            for(var j in citys){
               if(provinces[i].$.id === citys[j].$.pid){
                var li = document.createElement('li');
                li.innerHTML = citys[j].$.name;
                ul.appendChild(li);
               } 
            }
            $(ul).hide();
            $('#citys').append(ul);
        }

        $('#citys>li').click(function(){
            $(this).next('ul').toggle();
        })

    });
</script>
</html>